<template>
  <a-sub-menu v-if="!menu.meta?.hideInMenu" :key="menu.path">
    <template #icon>
      <avic-icon v-if="menu.meta?.icon !== undefined" :key="menu.meta.icon" :svg="menu.meta.icon" />
    </template>
    <template #title>
      {{ t(menu.meta.title) }}
      <a-tag v-if="menu.meta.menuMarkName" color="rgba(255,80,80,.9)">
        {{ t(menu.meta.menuMarkName) }}
      </a-tag>
    </template>
    <template v-if="openKeys.includes(menu.path)">
      <template v-for="child in menu.children">
        <a-menu-item
          v-if="(!child.children || child.meta?.hideChildrenInMenu) && !child.meta?.hideInMenu"
          :key="child.path"
          :title="t(child.meta.title)"
          @mouseenter="$emit('itemHover', { key: child.path })"
        >
          <template #icon>
            <avic-icon v-if="child.meta.icon !== undefined" :key="child.meta.icon" :svg="child.meta.icon" />
          </template>
          {{ t(child.meta.title) }}
          <a-tag v-if="child.meta.menuMarkName" color="#f50">
            {{ t(child.meta.menuMarkName) }}
          </a-tag>
          <avic-icon
            v-if="child.meta.collected"
            class="menu-star"
            svg="avic-star-fill"
            title="取消收藏"
            @click.stop="$emit('uncollectMenu', child.meta.id)"
          />
          <avic-icon
            v-else-if="child.meta.id"
            class="menu-star"
            svg="avic-star-line"
            title="收藏菜单"
            @click.stop="$emit('collectMenu', child)"
          />
        </a-menu-item>
        <template v-else>
          <sub-menu
            :key="child.path"
            :menu="child"
            :open-keys="openKeys"
            :collapsed="collapsed"
            @uncollectMenu="$emit('uncollectMenu', $event)"
            @collectMenu="$emit('collectMenu', $event)"
          />
        </template>
      </template>
    </template>
  </a-sub-menu>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { useI18n } from 'vue-i18n';
import type { RouteProps } from '../typing';

export interface SubMenuProps {
  menu: RouteProps;
}

export default defineComponent({
  name: 'SubMenu',
  props: {
    menu: {
      type: Object,
      required: true
    },
    collapsed: {
      type: Boolean,
      default: false
    },
    openKeys: {
      type: Array as PropType<string[]>,
      required: true
    }
  },
  emits: ['itemHover', 'collectMenu', 'uncollectMenu'],
  setup() {
    const { t } = useI18n();
    return {
      t
    };
  }
});
</script>

<style scoped></style>
